import React from 'react';
import Navbar from '../component/Navbar';
import './style/youhuiquan.css';

class YouHuiQuan extends React.Component {

    state = {
        yiLingQu: [],
        weiLingQu: [],
        type: true
    }

    componentDidMount() {
        this.setState({
            type: this.props.location.state && this.props.location.state.type
        })
        const data1 = [
            { title: '签到红包', money: '＋25.00', detaile: '已经签到过6天了', path: '' },
            { title: '实名注册', money: '＋189.00', detaile: '注册并完成实名认证', path: '' },
            { title: '首次充值', money: '＋349.00', detaile: '首次充值满 1000奖励', path: '' },
            { title: '首次配资', money: '＋349.00', detaile: '免息红包下次可抵扣', path: '' },
            { title: '首次配资', money: '＋25.00', detaile: '免息红包下次可抵扣', path: '' },
        ];
        const data2 = [
            { title: '首次追加', money: '＋25.00', detaile: '首次追加保证金', path: '' },
            { title: '实名注册', money: '＋189.00', detaile: '注册并完成实名认证', path: '' },
            { title: '首次提赢', money: '＋349.00', detaile: '首次追加保证金', path: '' },
            { title: '首次追加', money: '＋25.00', detaile: '首次追加保证金', path: '' },
            { title: '实名注册', money: '＋189.00', detaile: '注册并完成实名认证', path: '' },
            { title: '首次提赢', money: '＋349.00', detaile: '首次追加保证金', path: '' },
        ];
        this.setState({
            yiLingQu: data1,
            weiLingQu: data2
        })

    }

    goBack = () => {
        this.props.history.goBack();
    }

    render() {
        const { type } = this.state
        return (
            <div className='youhuiquan'>
                <Navbar onClick={this.goBack} title='优惠券'></Navbar>
                <div className='scroll'>
                    {
                        this.state.weiLingQu && this.state.weiLingQu.map((v, k) => {
                            return (
                                <div key={v + k} className='item1'>
                                    <div className='left'>
                                        <div className='top'>
                                            <span>{v.title}</span>
                                            <span>{v.money}</span>
                                        </div>
                                        <span className='bottom'>{v.detaile}</span>
                                    </div>
                                    {
                                        type ? <span className='right'>前往领取</span> : null
                                    }

                                </div>
                            )
                        })
                    }
                    {
                        this.state.yiLingQu && this.state.yiLingQu.map((v, k) => {
                            return (
                                <div key={v + k} className='item2'>
                                    <div className='left'>
                                        <div className='top'>
                                            <span>{v.title}</span>
                                            <span>{v.money}</span>
                                        </div>
                                        <span className='bottom'>{v.detaile}</span>
                                    </div>
                                    {
                                        type ? <span className='right'>已领取</span> : null
                                    }

                                </div>
                            )
                        })
                    }
                </div>
            </div>
        )
    }
}

export default YouHuiQuan;